import { styled } from '@mui/material'
import Heading from '../components/product/heading'
import { useParams } from 'react-router-dom'
import api from '../api'
import { useContext, useEffect } from 'react'
import { Actions } from '../store/reducer'
import { AppContext } from '../store/storeProvider'
import Body from '../components/product/body'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const Product = () => {
	const { dispatch } = useContext(AppContext)
	const { productId } = useParams()

	useEffect(() => {
		if (productId)
			api
				.getProduct(productId)
				.then((response) => {
					dispatch({ type: Actions.SET_PRODUCT_DATA, productData: response })
				})
				.catch((err) => {
					console.log(err)
				})
	}, [productId, dispatch])

	return (
		<StyledContainer>
			<Heading />
			<Body />
		</StyledContainer>
	)
}

export default Product
